<script setup>
import {
  ranking,
  getGameInfo,
  getAttitudeInfo,
  getAngulareInfo,
  getUser,
  getSpeedInfo,
} from "@/api/use";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { onMounted, onUnmounted, ref, getCurrentInstance, nextTick } from "vue";
const { appContext } = getCurrentInstance();
const $echarts = appContext.config.globalProperties.$echarts;

let rankData = ref(); //排名数据
const itemHeight = ref(0); //滚动高度
const scrollItems = ref(); //滚动ref
const userMess = ref({}); //用户信息
const gameData = ref({}); //游戏信息
const speedData = ref({}); //速度分析
const angulareData = ref({}); //角速度分析
let scrollInterval = null; //滚动定时器
//获取赛事排名
const rankFun = async () => {
  const param = {
    id: 119,
    pageSize: 50,
    pageNum: 1,
  };
  const res = await ranking(param);
  if (res.code === 200) {
    rankData.value = res.data.list;
    getAllData();
  }
};

//滚动的时候获取到顶部的数据请求接口
const getAllData = ()=>{
  gameInfo(rankData.value[0].id);
  infoMessage(rankData.value[0].id);
  speedInfo(rankData.value[0].id);
  angulareInfo(rankData.value[0].id);
}
//获取用户游戏详情
const gameInfo = async (id) => {
  const param = {
    eventId: 119,
    userId: id,
  };
  const res = await getGameInfo(param);
  if (res.code == 200) {
    gameData.value = res.data;
  }
};

//用户信息
const infoMessage = async (id) => {
  const param = {
    userId: id,
  };
  const res = await getUser(param);
  if (res.code === 200) {
    userMess.value = res.data;
  }
};

//速度分析
const speedInfo = async (id) => {
  const param = {
    userId: id,
    eventId: 119,
  };
  const res = await getSpeedInfo(param);
  if (res.code === 200) {
    speedData.value = res.data;
    chartInstance.setOption(option());
  }
};
//速度分析
const angulareInfo = async (id) => {
  const param = {
    userId: id,
    eventId: 119,
  };
  const res = await getAngulareInfo(param);
  if (res.code === 200) {
    angulareData.value = res.data;
    chartInstance2.setOption(option2());
  }
};

const formatProgress = (percentage) => {
  return percentage; // 直接返回数字，不拼接%
};

//折线地图属性
const chartMap = ref(null); //地图
const chartMap2 = ref(null); //地图
let chartInstance = null;
let chartInstance2 = null;

const option = () => {
  return {
    legend: {
      data: ["速度", "加速度", "单位：km/h"], // 图例数据，需与series.name对应
      top: "0", // 距离顶部10%
      right: "0", // 距离右侧5%
      padding: [0, 50, 0, 0],
      textStyle: {
        // 图例文字样式
        fontSize: 16, // 字体大小
        color: "#01EEEC", // 字体颜色
      },
    },
    xAxis: {
      type: "category",
      axisLabel: {
        color: "#999999", // 文字颜色
        fontSize: 16, // 文字大小
        fontWeight: "bold", // 文字粗细
      },
    },
    yAxis: {
      type: "value",
      name: "km/h",
      axisLabel: {
        color: "#999999", // 文字颜色
        fontSize: 16, // 文字大小
        fontWeight: "bold", // 文字粗细
      },
    },
    series: [
      {
        name: "速度",
        data: speedData.value.speedList,
        type: "line",
        lineStyle: {
          width: 4, // 线条宽度为3px
          color: "#43DE4E", // 线条颜色
        },
        areaStyle: {
          color: {
            // 渐变填充
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: "#43DE4E" }, // 顶部颜色（与线条接近）
              { offset: 1, color: "rgba(67, 222, 78, 0.1)" }, // 底部颜色（透明）
            ],
          },
        },
      },
      {
        name: "加速度",
        data: speedData.value.accelerationList,
        type: "line",
        lineStyle: {
          width: 4, // 线条宽度为3px
          color: "#59D4FF", // 线条颜色
        },
        areaStyle: {
          color: {
            // 渐变填充
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: "#59D4FF" }, // 顶部颜色（与线条接近）
              { offset: 1, color: "rgba(89, 212, 255, 0.1)" }, // 底部颜色（透明）
            ],
          },
        },
      },
    ],
    grid: {
      top: "30px",
      left: "20px",
      right: "20px",
      bottom: "20px",
      containLabel: true,
    },
  };
};

const option2 = () => {
  return {
    legend: {
      data: ["角速度X", "角速度Y", "角速度Z", "单位：deg/s"], // 图例数据，需与series.name对应
      top: "0", // 距离顶部10%
      right: "0", // 距离右侧5%
      padding: [0, 50, 0, 0],
      textStyle: {
        fontSize: 16, // 字体大小
        color: "#01EEEC", // 字体颜色
      },
    },
    xAxis: {
      type: "category",
      axisLabel: {
        color: "#999999", // 文字颜色
        fontSize: 16, // 文字大小
        fontWeight: "bold", // 文字粗细
      },
    },
    yAxis: {
      type: "value",
      name: "km/h",
      axisLabel: {
        color: "#999999", // 文字颜色
        fontSize: 16, // 文字大小
        fontWeight: "bold", // 文字粗细
      },
    },
    series: [
      {
        name: "角速度X",
        data: angulareData.value.angulareX,
        type: "line",
        lineStyle: {
          width: 4, // 线条宽度为3px
          color: "#43DE4E", // 线条颜色
        },
        areaStyle: {
          color: {
            // 渐变填充
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: "#43DE4E" }, // 顶部颜色（与线条接近）
              { offset: 1, color: "rgba(67, 222, 78, 0.1)" }, // 底部颜色（透明）
            ],
          },
        },
      },
      {
        name: "角速度Y",
        data: angulareData.value.angulareY,
        type: "line",
        lineStyle: {
          width: 4, // 线条宽度为3px
          color: "#59D4FF", // 线条颜色
        },
        areaStyle: {
          color: {
            // 渐变填充
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: "#59D4FF" }, // 顶部颜色（与线条接近）
              { offset: 1, color: "rgba(89, 212, 255, 0.1)" }, // 底部颜色（透明）
            ],
          },
        },
      },
      {
        name: "角速度Z",
        data: angulareData.value.angulareZ,
        type: "line",
        lineStyle: {
          width: 4, // 线条宽度为3px
          color: "#EBA45A", // 线条颜色
        },
        areaStyle: {
          color: {
            // 渐变填充
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: "#EBA45A" }, // 顶部颜色（与线条接近）
              { offset: 1, color: "rgba(235, 164, 90, 0.1)" }, // 底部颜色（透明）
            ],
          },
        },
      },
    ],
    grid: {
      top: "30px",
      left: "20px",
      right: "20px",
      bottom: "20px",
      containLabel: true,
    },
  };
};

//绘制地图
const initChart = () => {
  if (chartMap.value) {
    chartInstance = $echarts.init(chartMap.value);
    chartInstance.setOption(option());
  }
  if (chartMap2.value) {
    chartInstance2 = $echarts.init(chartMap2.value);
    chartInstance2.setOption(option2());
  }
};
//列表滚动
const scrollContainer = ref();
const startAutoScroll = () => {
  const container = scrollContainer.value;
  scrollInterval = setInterval(() => {
    container.scrollTop += itemHeight.value;
    const newArray = rankData.value;
    const item = newArray.shift();
    newArray.push(item);
    rankData.value = newArray;
    getAllData();
  }, 6000); // 调整时间间隔以改变滚动速度
};

onUnmounted(() => {
  clearInterval(scrollInterval);
});
onMounted(() => {
  //绘制地图
  initChart();
  rankFun();
  //开始滚动
  startAutoScroll();
  //获取滚动高度
  nextTick(() => {
    if (scrollItems.value) {
      const firstItem = scrollItems.value[0];
      const styles = window.getComputedStyle(firstItem);
      itemHeight.value =
        firstItem.offsetHeight + parseFloat(styles.marginBottom);
    }
  });
});
</script>

<template>
  <div class="mainLast">
    <div class="mainLastLeft">
      <div class="top">
        <p>排行榜</p>
      </div>
      <div class="center">
        <div class="th">
          <div class="first">排名</div>
          <div class="second">姓名</div>
          <div class="third">得分</div>
        </div>
        <div
          class="scroll-container"
          ref="scrollContainer"
        >
          <div
            class="tr"
            ref="scrollItems"
            v-for="item in rankData"
            :key="item.id"
          >
            <div class="td">
              <img src="@/assets/reward_1.png" />
            </div>
            <div class="second">{{ item.nickName }}</div>
            <div class="third">{{ item.mileage }}</div>
          </div>
          <!-- <vue3-seamless-scroll
            v-if="rankData.length > 0"
            :list="rankData"
            :singleHeight="itemHeight"
            ref="scrollRef"
            @scroll="handleScroll"
            @ScrollEnd="ScrollEnd"
            :singleWaitTime="2000"
            :limitScrollNum="4"
          >
            <div ref="scrollContent">
              <div
                class="tr"
                ref="scrollItems"
                v-for="item in rankData"
                :key="item.id"
              >
                <div class="td">
                  <img src="@/assets/reward_1.png" />
                </div>
                <div class="second">{{ item.nickName }}</div>
                <div class="third">{{ item.mileage }}</div>
              </div>
            </div>
          </vue3-seamless-scroll> -->
        </div>
      </div>
    </div>
    <div class="mainLastRight">
      <div class="left">
        <div class="personTop">
          <img :src="userMess.avatar" />
          <div class="personTopRight">
            <p>姓名：{{ userMess.nickName }}</p>
            <p>年龄：{{ userMess.age || "" }}</p>
            <p>等级：{{ userMess.title || "暂无" }}</p>
            <p>积分：{{ userMess.integral }}</p>
            <p class="personTopBottom">
              本场里程：<text>{{ gameData.mileage }}</text>
            </p>
          </div>
        </div>
        <div class="personBottom">
          <div>
            <el-progress
              type="circle"
              class="custom-progress"
              :percentage="gameData.mileage"
              color="#65B8F8"
              :format="formatProgress"
              stroke-width="12"
              text-color="#00FFFB"
            ></el-progress>
            <p>里程数(KM)</p>
          </div>
          <div>
            <el-progress
              type="circle"
              class="custom-progress"
              :percentage="gameData.fastestSpeed"
              :format="formatProgress"
              color="#87F7C7"
              stroke-width="12"
              text-color="#00FFFB"
            ></el-progress>
            <p>平均速度(m/s)</p>
          </div>
          <div>
            <el-progress
              type="circle"
              :percentage="25"
              class="custom-progress"
              :format="formatProgress"
              color="#BC75FF"
              stroke-width="12"
              text-color="#00FFFB"
            ></el-progress>
            <p>平均加速度(m/s)</p>
          </div>
          <div>
            <el-progress
              type="circle"
              class="custom-progress"
              :percentage="gameData.averageSpeed"
              :format="formatProgress"
              color="#F9A01C"
              stroke-width="12"
              text-color="#00FFFB"
            ></el-progress>
            <p>平均角速度(s)</p>
          </div>
        </div>
      </div>
      <div class="middle"></div>
      <div class="right">
        <div class="speed">
          <div class="top">
            <p>速度稳定性分析</p>
          </div>
          <div class="center" ref="chartMap"></div>
        </div>
        <div class="angle">
          <div class="top">
            <p>角度稳定性分析</p>
          </div>
          <div class="center" ref="chartMap2"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.mainLast {
  display: flex;
  margin-top: 19px;
  justify-content: space-between;
  .mainLastLeft {
    width: 450px;
    height: 408px;
    background: url("@/assets/img3.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    .top {
      width: calc(100% - 38px);
      height: 38px;
      line-height: 38px;
      font-size: 20px;
      color: #00fffb;
      text-align: left;
      margin: 19px 19px 0px;
      background: url("@/assets/img1.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      p {
        padding-left: 10px;
      }
    }
    .center {
      height: 320px;
      overflow: hidden;
      .th {
        display: flex;
        align-items: center;
        font-size: 20px;
        color: #00fffb;
        line-height: 28px;
        margin: 15px 24px;
        .first {
          width: 20%;
        }
        .second {
          width: 40%;
        }
        .third {
          width: 40%;
          text-align: right;
        }
      }
      .scroll-container {
        height: 248px;
        overflow: hidden;
      }
      .tr {
        height: 50px;
        display: flex;
        font-size: 24px;
        color: #00fffb;
        align-items: center;
        padding: 0px 24px;
        margin-bottom: 12px;
        box-sizing: border-box;
        .td {
          width: 20%;
          img {
            width: 36px;
            height: 36px;
          }
        }
        .bgImg {
          height: 42px;
          line-height: 42px;
          font-size: 30px;
          color: #00fffb;
          background: url("@/assets/reward_other.png");
          background-size: 36px 36px;
          background-repeat: no-repeat;
          background-position: center;
        }
        .second {
          width: 40%;
        }
        .third {
          width: 40%;
          text-align: right;
        }
      }
      .trHover {
        background: rgba(0, 255, 251, 0.2);
        box-shadow: 0px 0px 4px 0px rgba(14, 64, 65, 0.5);
      }
    }
  }
  .mainLastRight {
    width: 1342px;
    height: 360px;
    padding: 24px;
    display: flex;
    background: url("@/assets/img6.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    .left {
      border-right: 2px solid
        linear-gradient(
          180deg,
          rgba(0, 177, 194, 0) 0%,
          #00b7c7 55%,
          rgba(0, 183, 199, 0) 100%
        );
      opacity: 0.5;
      padding-right: 40px;
      .personTop {
        display: flex;
        img {
          width: 128px;
          height: 160px;
          border-radius: 8px;
        }
        .personTopRight {
          margin-left: 12px;
          p {
            font-size: 16px;
            color: #00fffb;
            line-height: 24px;
            text-align: left;
          }
          .personTopBottom {
            margin-top: 22px;
            text {
              font-size: 24px;
              color: #00fffb;
              margin-left: 12px;
            }
          }
        }
      }
      .personBottom {
        margin: 0 27px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        div {
          width: 50%;
          margin: 0 auto;
          margin-top: 8px;
          .custom-progress {
            --el-progress-circle-width: 80px; /* 小圆形 */
          }
          ::v-deep .custom-progress .el-progress__circle {
            /* 环形内部的背景色 */
            opacity: 0.5 !important;
            background-color: #d8d8d8 !important;
          }
          ::v-deep .custom-progress .el-progress-circle {
            width: 100% !important;
            height: 100% !important;
          }
          ::v-deep .custom-progress .el-progress__text {
            font-size: 24px !important;
            color: #00fffb !important;
            
          }
          p {
            font-size: 12px;
            color: #00fffb;
            line-height: 17px;
            margin-top: 8px;
            font-weight: bold;
          }
        }
      }
    }
    .middle {
      width: 2px;
      height: 360px;
      margin-right: 24px;
      background: linear-gradient(
        180deg,
        rgba(0, 177, 194, 0) 0%,
        #00b7c7 55%,
        rgba(0, 183, 199, 0) 100%
      );
      opacity: 0.5;
    }
    .right {
      display: flex;
      justify-content: space-between;
      .speed {
        width: 495px;
        height: 360px;
        .top {
          width: 412px;
          height: 38px;
          line-height: 38px;
          font-size: 20px;
          color: #00fffb;
          text-align: left;
          background: url("@/assets/img1.png");
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          p {
            padding-left: 20px;
          }
        }
        .center {
          height: 302px;
          width: 100%;
          margin-top: 20px;
        }
      }
      .angle {
        width: 495px;
        height: 360px;
        .top {
          width: 412px;
          height: 38px;
          line-height: 38px;
          font-size: 20px;
          color: #00fffb;
          text-align: left;
          background: url("@/assets/img1.png");
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          p {
            padding-left: 20px;
          }
        }
        .center {
          height: 302px;
          width: 100%;
          margin-top: 20px;
        }
      }
    }
  }
}
</style>
